<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>JQuery - 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #zoneDiapo {
                width: 1000px;
                height: 500px;
                list-style: none;
                position: relative;
                overflow: hidden;
            }
            
            #zoneDiapo li {
                /*float: left;*/
                /*display: block;*/
                position: absolute;
                opacity: 0;
            }
            
            #zoneDiapo li:last-child {
                /*float: left;*/
                display: block;
                position: absolute;
                opacity: 1;
            }

        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script>
            $(document).ready(function(){
                zoneDiapo = $("#zoneDiapo li:last-child");
                /*$(activeItem).addClass('active');*/

                $("#zoneDiapo li").click(function(){
                    $(zoneDiapo).animate({left: "-1000px", opacity:0}, {duration:2000, queue:false});
                    zoneDiapo = $(zoneDiapo).prev();
                    $(zoneDiapo).animate({opacity:1}, {duration:2000, queue:false});
                });
            });
        </script>
    </head>
    <body>
        <ol id="zoneDiapo">
            <li><img src="images/espace_1.jpg"></li>
            <li><img src="images/espace_2.jpg"></li>
            <li><img src="images/espace_3.jpg"></li>
        </ol>
        
    </body>
</html>
